<template>
  <div class="listStyle2">
    <table border="1" rules="all" style="width: 100%;color: black">
      <tr>
        <td style="border:none"><input type="checkbox" :checked="checkedLength>0"/><span>已完成{{ checkedLength }}/全部{{ taskLength }}</span></td>
        <td style="border:none"><input type="button" value="清除已完成任务" class="clearBtn" @click="clearTask"></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Footer",
  props:{
    //全部
    taskLength:{
      type:Number,
      default(){
        return 0
      }
    },
    //已完成
    checkedLength:{
      type:Number,
      default(){
        return 0
      }
    },
  },
  methods:{
    clearTask(){
      if (this.checkedLength > 0){
        this.$emit('clearTask')
      }else{
        alert('暂无可清除的任务!')
      }
    }
  }
}
</script>

<style scoped>
.listStyle2{
  margin-top: 5px;
  width: 100%;
  line-height: 30px;
}
.clearBtn{
  float: right;
  background-color: #e65d46;
  color:white;
  border: none;
  font-size: 12px;
  padding: 5px 12px;
}
</style>
